<template>
  <div>
    <a-button v-print="printObj" type="link">打印</a-button>
    <div v-show="false">
      <div :id="record.id">
        <div class="codes-wrap">
          <div class="list-woper">
            <p>
              <span>
                {{ detailData.date }}
              </span>
              <span style="margin-left: 10px"> {{ detailData.realname }}制 </span>
            </p>
            <div class="scan">
              <vue-qr
                :text="JSON.stringify({ id: detailData.entryCode, EntityType: 'inventoryOrder' })"
                :size="120"
                :margin="0"
              ></vue-qr>
              <p class="code">{{ detailData.entryCode || '-' }}</p>
            </div>
            <h2 style="text-align: center; width: 100%;margin-bottom: 30px;">入库单</h2>
            <div class="list">
              <p>
                <span>入库单编号：</span>
                <span>{{ detailData.entryCode || '-' }}</span>
              </p>
              <p>
                <span>入库类型：</span>
                <span>{{ detailData.inWarehouseTypeName || '-' }}</span>
              </p>
              <p>
                <span>入库时间：</span>
                <span>{{ detailData.inWarehouseTime || '-' }} </span>
              </p>
              <p v-if="detailData.inWarehouseType == 2">
                <span>销售订单：</span>
                <span>{{ detailData.saleOrderCode || '-' }}</span>
              </p>
              <p>
                <span>送入人：</span>
                <span>{{ detailData.sendPersionName || '-' }}</span>
              </p>
            </div>
            <h2 style="width: 100%; margin-bottom: -10px">入库物品明细</h2>
            <table class="table" border>
              <tr>
                <td>序号</td>
                <td>物品编号</td>
                <td>物品名称</td>
                <td>规格</td>
                <td>属性</td>
                <td>单位</td>
                <td>数量</td>
              </tr>
              <tr v-for="(list, index) in dataSource" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ list.serialNumber || '-' }}</td>
                <td>{{ list.serialName || '-' }}</td>
                <td>{{ list.serialSpecifications || '-' }}</td>
                <td>{{ list.serialProperties || '-' }}</td>
                <td>{{ list.unitName || '-' }}</td>
                <td>{{ list.inWarehouseNum || '-' }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import print from 'vue-print-nb'
import moment from 'moment'
import vueQr from 'vue-qr'
import { APILX } from '@/api/requestLx'
export default {
  props: {
    record: {
      type: Object,
    },
  },
  directives: {
    print,
  },
  data() {
    return {
      moment,
      printObj: {
        id: this.record.id,
        previewBeforeOpenCallback(vue) {
          console.log('正在加载预览窗口', vue)
        },
        previewOpenCallback(vue) {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          console.log('打开之前', vue)
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        },
        clickMounted(vue) {
          vue.$emit('changePrint')
          console.log('点击v-print绑定的按钮了！')
        },
      },
      detailData: {},
      realname: '',
      date: '',
      dataSource: [],
    }
  },
  watch: {},
  components: { vueQr },
  created() {
    this.detailData = this.record
    let realname = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    let date = moment(new Date()).format('YYYY-MM-DD')
    this.detailData.date = date
    this.detailData.realname = realname

    APILX.warehouseEntryDetailList({ entryId: this.detailData.id, inOutType: 0 }).then((res) => {
      if (res.code == 200) {
        this.dataSource = res.result.records
      } else {
        this.$antdMessage.error(res.message)
      }
    })
  },
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.codes-wrap {
  height: 100vh;
  width: 100vw;
}
.list-woper {
  position: relative;
}
.scan {
  position: absolute;
  top: 10mm;
  right: 0;
}

.code {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  p {
    width: 50%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 30px;
  }
}

.table {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;

  td {
    padding: 10px;
  }
}
</style>
